 <template>
  <div class="header">
    <div class="header-left">
      <div class="title"> <span class="decorate">|</span> {{title}}</div>
      <div class="description">{{description}}</div>
    </div>
    <router-link v-bind:to="linkUrl">
      <div class="header-right">
        <div>查看更多</div>
        <img class="arrow-right" src="../../images/icon/arrow.png" alt="">
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // title: "",
      // description: ""
    };
  },
  props: ["title", "description", "linkUrl"],

  mounted() {
    // console.log(title, descriptions)
  }
  // beforeDestroy() {
  //   clearInterval(this.timer);
  // }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.header {
  @include fj(space-between);
  align-items: center;

  height: 1rem;
  margin: 0.2rem 0.2rem 0 0.2rem;
  line-height: 1rem;

  .header-left {
    @include fj(space-around);
    .title {
      @include sc(0.4rem, #000);
      // border-left: 0.05rem solid #16e08f;
      .decorate {
        width: 0.1rem;
        height: 0.4rem;
        background: #16e08f;
        color: #16e08f;
        margin-right: 0.2rem;
      }
    }

    .description {
      @include sc(0.24rem, #666);
      margin-left: 0.2rem;
    }
  }

  .header-right {
    @include fj(space-around);
    align-items: center;

    .arrow-right {
      transform: rotate(270deg);
      height: 0.44rem;
      width: 0.44rem;
    }
  }
}
</style>
